<template>
	<swiper class="swiper" :style="style" circular indicator-dots :autoplay="props.autoplay"
		indicator-color="rgba(255,255,255,.45)" indicator-active-color="var(--xl-primary)">
		<swiper-item v-for="(item, index) in list" :key="index">
			<view class="swiper-item" :style="itemStyle" @tap="$page.ads(item)">
				<image :src="item.image" mode="scaleToFill" class="swiper-image" :style="itemStyle" />
			</view>
		</swiper-item>
	</swiper>
</template>

<script setup lang="ts">
import { $api, $page } from '@/utils'
import { ref, onMounted, nextTick, defineProps } from "vue";
const props = withDefaults(defineProps<{
	position: string
	height?: number | string
	rounded?: number | string
	autoplay?: boolean
}>(), {
	position: '',
	height: 150,
	rounded: 0,
	autoplay: true
});
const emit = defineEmits(['loaded', 'update:show']);
const style = ref({
	height: props.height + 'px',
	'--radius': props.rounded + 'px'
});
const itemStyle = ref({
	height: props.height + 'px'
});
const list = ref<AdsInterface[]>([]);
onMounted(() => {
	$api.Ads.ads(props.position).then((res: any) => {
		list.value = res;
		emit('update:show', true)
		nextTick(() => {
			emit('loaded')
		})
	}).catch(() => {
		list.value = [];
		emit('update:show', false)
		emit('loaded')
	})
})
</script>

<style lang="scss" scoped>
.swiper {
	width: 100%;
}

.swiper-item {
	width: 100%;
}

.swiper-image {
	width: 100%;
	height: 100%;
}
</style>